"use client"

import { TrendingUp } from "lucide-react"
import { Label, PolarRadiusAxis, RadialBar, RadialBarChart } from "recharts"

import {
   Card,
   CardContent,
   CardDescription,
   CardFooter,
   CardHeader,
   CardTitle,
} from "~/registry/default/ui/card"
import {
   type ChartConfig,
   ChartContainer,
   ChartTooltip,
   ChartTooltipContent,
} from "~/registry/default/ui/chart"

export const description = "A radial chart with stacked sections"

const chartData = [{ month: "january", desktop: 1260, mobile: 570 }]

const chartConfig = {
   desktop: {
      label: "Desktop",
      color: "hsl(var(--chart-1))",
   },
   mobile: {
      label: "Mobile",
      color: "hsl(var(--chart-2))",
   },
} satisfies ChartConfig

export default function Component() {
   const totalVisitors = chartData[0].desktop + chartData[0].mobile

   return (
      <Card className="flex flex-col">
         <CardHeader className="items-center pb-0">
            <CardTitle>Radial Chart - Stacked</CardTitle>
            <CardDescription>January - June 2024</CardDescription>
         </CardHeader>
         <CardContent className="flex flex-1 items-center pb-0">
            <ChartContainer
               config={chartConfig}
               className="mx-auto aspect-square w-full max-w-[250px]"
            >
               <RadialBarChart
                  data={chartData}
                  endAngle={180}
                  innerRadius={80}
                  outerRadius={130}
               >
                  <ChartTooltip
                     cursor={false}
                     content={<ChartTooltipContent hideLabel />}
                  />
                  <PolarRadiusAxis
                     tick={false}
                     tickLine={false}
                     axisLine={false}
                  >
                     <Label
                        content={({ viewBox }) => {
                           if (viewBox && "cx" in viewBox && "cy" in viewBox) {
                              return (
                                 <text
                                    x={viewBox.cx}
                                    y={viewBox.cy}
                                    textAnchor="middle"
                                 >
                                    <tspan
                                       x={viewBox.cx}
                                       y={(viewBox.cy || 0) - 16}
                                       className="fill-foreground text-2xl font-bold"
                                    >
                                       {totalVisitors.toLocaleString()}
                                    </tspan>
                                    <tspan
                                       x={viewBox.cx}
                                       y={(viewBox.cy || 0) + 4}
                                       className="fill-muted-foreground"
                                    >
                                       Visitors
                                    </tspan>
                                 </text>
                              )
                           }
                        }}
                     />
                  </PolarRadiusAxis>
                  <RadialBar
                     dataKey="desktop"
                     stackId="a"
                     cornerRadius={5}
                     fill="var(--color-desktop)"
                     className="stroke-transparent stroke-2"
                  />
                  <RadialBar
                     dataKey="mobile"
                     fill="var(--color-mobile)"
                     stackId="a"
                     cornerRadius={5}
                     className="stroke-transparent stroke-2"
                  />
               </RadialBarChart>
            </ChartContainer>
         </CardContent>
         <CardFooter className="flex-col gap-2 text-sm">
            <div className="flex items-center gap-2 font-medium leading-none">
               Trending up by 5.2% this month <TrendingUp className="h-4 w-4" />
            </div>
            <div className="leading-none text-muted-foreground">
               Showing total visitors for the last 6 months
            </div>
         </CardFooter>
      </Card>
   )
}
